<template>
  <div class="add-appointment-container">
    <!-- 动态标题 -->
    <div class="header">
      <h2>{{ isEditMode ? '修改业务设置' : '新增业务设置' }}</h2>
    </div>

    <!-- 表单区域 -->
    <el-form :model="form" label-width="100px" class="form-container">
      <!-- 业务类型 -->
      <el-form-item label="业务类型:">
        <el-radio-group v-model="form.appointmentType">
          <el-radio value="挂号" label="挂号"/>
          <el-radio value="体检" label="体检" />
        </el-radio-group>
      </el-form-item>

      <!-- 日期 -->
      <el-form-item label="日期:">
        <el-select v-model="form.scheduleDate" placeholder="请选择日期">
          <el-option label="法定工作日" value="法定工作日" />
          <el-option label="周一" value="周一" />
          <el-option label="周二" value="周二" />
          <el-option label="周三" value="周三" />
          <el-option label="周四" value="周四" />
          <el-option label="周五" value="周五" />
          <el-option label="周六" value="周六" />
          <el-option label="周日" value="周日" />
        </el-select>
      </el-form-item>

      <!-- 时间段 -->
      <el-form-item label="时间段:">
        <el-time-picker
            v-model="timeRange"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
        />
      </el-form-item>

      <!-- 按钮区域 -->
      <el-form-item class="button-group">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import {router} from "@/router/index.js";
const route = useRoute()

// 判断是编辑模式还是新增模式
const isEditMode = computed(() => route.params.id != null)

// 表单数据
const form = ref({})

// 时间范围选择器数据
const timeRange = ref([])

// 获取表单数据（编辑模式）
const fetchAppointmentData = async () => {
  try {
    const res = await axios.get(`/doctorSchedule/getAppointmentData/${route.params.id}`)
    form.value= res.data.obj

    // // 填充表单数据
    // form.value = {
    //   appointmentType: data.appointmentType || '挂号',
    //   workdayType: data.workdayType || '法定工作日',
    //   startTime: data.startTime || '09:00:00',
    //   endTime: data.endTime || '11:30:00'
    // }
    //
    // // 设置时间范围选择器
    // timeRange.value = [
    //   new Date(0, 0, 0, ...data.startTime.split(':').map(Number)),
    //   new Date(0, 0, 0, ...data.endTime.split(':').map(Number))
    // ]
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

// 提交表单
const handleSubmit =  () => {
  try {
    // // 处理时间范围
    // const [start, end] = timeRange.value
    // form.value.startTime = start.toTimeString().substr(0, 8)
    // form.value.endTime = end.toTimeString().substr(0, 8)

    if (route.params.id) {
      // 编辑模式 - 更新数据
       axios.put(`/doctorSchedule/update/${route.params.id}`, form.value).then(res=>{
         ElMessage.success('修改成功')

       })
    } else {
       axios.post('/doctorSchedule/create', form.value).then(res=>{
         ElMessage.success('添加成功')
       })
    }

    // 返回列表页
     router.push('/appointmentSetting')
  } catch (error) {
    ElMessage.error(isEditMode.value ? '修改失败' : '添加失败')
  }
}

// 取消操作
const handleCancel = () => {
  router.push('/appointmentSetting')
}

// 组件挂载时获取数据（编辑模式）
onMounted(() => {
  if (isEditMode.value) {
    fetchAppointmentData()
  }
})
</script>

<style scoped>
.add-appointment-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 30px;
  text-align: center;
}

.header h2 {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 20px;
}

.el-select {
  width: 100%;
}
</style>